@extend %selected_items;
}
-
+
&:backdrop, & {
border-left-color: mix($selected_fg_color, $selected_bg_color, 50%);
border-top-color: transparentize($fg_color, 0.9); // doesn't work unfortunatelly
- }
+ }
}
&:disabled {
border: 1px solid $selected_borders_color;
border-radius: 4px;
+ background-color: $selected_bg_color;
background-image: linear-gradient(to bottom,
$selected_bg_color,
darken($selected_bg_color,10%));
transparentize(black,0.9));
&:selected {
- @if $variant == 'light' {
- color: $selected_bg_color;
- box-shadow: none;
- }
-
- @else { box-shadow: inset 0 1px transparentize(white, 0.95); }
-
- background-image: linear-gradient(to bottom,
- $base_color,
- darken($base_color,10%));
+ &:focus, & {
+ border-radius: 4px;
- &:backdrop {
@if $variant == 'light' {
color: $selected_bg_color;
- border-color: $selected_borders_color; // otherwise it gets inherited by .view(?!?)
+ box-shadow: none;
}
- @else { border-color: $backdrop_base_color; }
+ @else { box-shadow: inset 0 1px transparentize(white, 0.95); }
+
+ background-image: linear-gradient(to bottom,
+ $base_color,
+ darken($base_color,10%));
- background-color: $backdrop_base_color;
+ &:backdrop {
+ @if $variant == 'light' {
+ color: $selected_bg_color;
+ border-color: $selected_borders_color; // otherwise it gets inherited by .view(?!?)
+ }
+
+ @else { border-color: $backdrop_base_color; }
+
+ background-color: $backdrop_base_color;
+ }
}
}
border-radius: 4px;
&:selected {
- background-color: if($variant == 'light',
- transparentize($selected_fg_color, 0.7),
- darken($selected_bg_color, 10%));
-
- @if $variant == 'light' {
- border-width: 1px 0;
- border-style: solid;
- border-color: $selected_bg_color;
+ &:focus, & {
+ background-color: if($variant == 'light',
+ transparentize($selected_fg_color, 0.7),
+ darken($selected_bg_color, 10%));
+ border-radius: 4px;
+
+ @if $variant == 'light' {
+ border-width: 1px 0;
+ border-style: solid;
+ border-color: $selected_bg_color;
+ }
}
}
}
background-size: 1px 1px, 1px 1px;
&:backdrop {
- background-image: linear-gradient(to top, $backdrop_borders_color),
+ background-image: linear-gradient(to top, $backdrop_borders_color),
linear-gradient(to top, $backdrop_borders_color);
}
}
treeview.view.progressbar {
border: 1px solid #0f2b48;
border-radius: 4px;
+ background-color: #215d9c;
background-image: linear-gradient(to bottom, #215d9c, #184472);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.15), 0 1px rgba(0, 0, 0, 0.1); }
- treeview.view.progressbar:selected {
+ treeview.view.progressbar:selected:focus, treeview.view.progressbar:selected {
+ border-radius: 4px;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
background-image: linear-gradient(to bottom, #292929, #101010); }
- treeview.view.progressbar:selected:backdrop {
+ treeview.view.progressbar:selected:focus:backdrop, treeview.view.progressbar:selected:backdrop {
border-color: #2c2c2c;
background-color: #2c2c2c; }
treeview.view.progressbar:backdrop {
treeview.view.trough {
background-color: rgba(238, 238, 236, 0.1);
border-radius: 4px; }
- treeview.view.trough:selected {
- background-color: #184472; }
+ treeview.view.trough:selected:focus, treeview.view.trough:selected {
+ background-color: #184472;
+ border-radius: 4px; }
treeview.view header button {
color: #8c8c8b;
background-color: #292929;
color: #ffffff;
border: 1px solid #184472;
border-radius: 4px;
+ background-color: #4a90d9;
background-image: linear-gradient(to bottom, #4a90d9, #2a76c6);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px rgba(0, 0, 0, 0.2); }
- treeview.view.progressbar:selected {
+ treeview.view.progressbar:selected:focus, treeview.view.progressbar:selected {
+ border-radius: 4px;
color: #4a90d9;
box-shadow: none;
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6); }
- treeview.view.progressbar:selected:backdrop {
+ treeview.view.progressbar:selected:focus:backdrop, treeview.view.progressbar:selected:backdrop {
color: #4a90d9;
border-color: #184472;
background-color: white; }
treeview.view.trough {
background-color: rgba(46, 52, 54, 0.1);
border-radius: 4px; }
- treeview.view.trough:selected {
+ treeview.view.trough:selected:focus, treeview.view.trough:selected {
background-color: rgba(255, 255, 255, 0.3);
+ border-radius: 4px;
border-width: 1px 0;
border-style: solid;
border-color: #4a90d9; }